<template>
	<!-- 料消息+新版补单消息 -->
	<view class="article-detail flex-c" v-if="article">
		<view class="article-detail-item flex-c" :class="{'add-icon': relationId}" @tap="goArticleDetail(article.id)">
			<view class="item-body flex-c">
				<view class="item-body-info flex-r">
					<view class="artitlce-title">
						<image  v-if="article.label==='1'" class="spfa" src="@/public/images/article/yxkmd.png" mode=""></image>
						<image v-else-if="article.label==='2'" class="spfa" src="@/public/images/article/flfa.png" mode=""></image>
						<image class="spfa" v-if="article.articleType=='2'" src="@/public/images/index/spfa.png" ></image>
						<text class="article_content">{{article.title}}</text>
					</view>
					<view class="card-free" v-if="article.label != '0' && !relationId">
						<image src="@/public/images/public/yxmd.png" mode="aspectFit" v-if="article.label == '1'"></image>
						<image src="@/public/images/public/flfa.png" mode="aspectFit" v-else-if="article.label == '2'"></image>
					</view>
				</view>
				<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList" :canTap="false" @openArticle="goArticleDetail(article.id)"></ArticleMatch>
			</view>
			<view class="item-foot flex-r">
				<view class="item-foot-info">
					<uni-dateformat class="date" :date="article.displayTime" format="yyyy.MM.dd hh:mm"></uni-dateformat>
				</view>
				<text class="color-blue" v-if="relationId">点击解锁</text>
			</view>
		</view>
	</view>
	<!-- 比赛消息 -->
	<view class="match-detail flex-c" v-else-if="match">
		<view class="match-detail-item flex-c" @tap="goMatchDetail(match)">
			<view class="body flex-c">
				<view class="des flex-r">
					<view class="left">
						<text>{{match.competitionName}}</text>
					</view>
					<view class="center flex-r">
						<text></text>
					</view>
					<view class="right">
						<uni-dateformat class="time" :date="match.matchTime" format="MM.dd hh:mm"></uni-dateformat>
					</view>
				</view>
				<view class="content flex-r">
					<view class="center flex-r text-bold">
						<text class="home">{{match.homeNameZh}}</text>
						<text class="color-red">VS</text>
						<text class="away">{{match.awayNameZh}}</text>
					</view>
				</view>
			</view>
			<view class="foot color-blue text-bold">
				<text>查看比赛</text>
			</view>
		</view>
	</view>
	<!-- 补单消息 -->
	<view class="addcontent-detail flex-c" v-else-if="addcontent">
		<view class="addcontent-detail-item flex-c" @tap="goAddcontentDetail(addcontent.articleId)">
			<view class="item-body">
				<image src="@/public/images/message/bd@2x.png" mode="aspectFit"></image>
				<span>{{addcontent.content}}</span>
			</view>
			<view class="item-foot flex-r">
				<uni-dateformat class="date" :date="Number(addcontent.createTime)" format="yyyy.MM.dd hh:mm"></uni-dateformat>
				<span class="color-blue">查看详情</span>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * CustomMessage 自定义消息
	 * @description 私信聊天中的自定义消息组件，用于展示专家发送的自定义消息
	 * @property {String} message 消息内容
	 * @example <CustomMessage :message="messageData"></CustomMessage>
	 */
	export default {
		name: "CustomMessage",
		props: {
			message: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				article: null, //料
				match: null, //比赛
				image: null, //图片
				addcontent: null, //补单内容（旧）
				relationId: null, //补单料ID（新）
			};
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		beforeMount() {
			if(this.message != ''){
				try{//解析数据
					let data = JSON.parse(this.message)
					console.log(data);
					if(data.businessID == 'custom_message_liaoType'){//方案
						this.article = data.customMessageJson
					}else if(data.businessID == 'custom_message_gameType'){//比赛
						this.match = data.customMessageJson
					}else if(data.businessID.includes('BuDanType')){//补单
						if(data.customMessageJson.relationId){//新的关联补单
							this.article = data.customMessageJson
							this.relationId = data.customMessageJson.relationId
						}else{//旧的补单数据
							this.addcontent = data.customMessageJson
						}
					}
				}catch(e){
					console.log(e);
				}
			}
		},
		methods: {
			//进入料详情
			goArticleDetail(articleId) {
				if(this.relationId) {
					this.$goByName('articledetail', {aid: articleId, random: Date.now(), rid: this.relationId})
				}else{
					this.$CHS.goArticleDetail(articleId)
				}
			},
			//进入比赛详情
			goMatchDetail(match) {
				let name = match.sportId == 1 ? 'matchfoot' : 'matchbasket'
				let params = {mid: match.matchId, sportId: match.sportId}
				this.$goByName(name, params)
			},
			//进入补单详情页
			goAddcontentDetail(id) {
				this.$goByName('addcontentdetail', {aid: id})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-detail{
		width: 532rpx;
		.article-detail-item{
			border-radius: 10rpx;
			background: #FFFFFF;
			.item-body{
				margin: 25rpx 20rpx 0;
				.item-body-info{
					margin-bottom: 11rpx;
					position: relative;
					align-items: center;
					.artitlce-title{
						width: 470rpx;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 45rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						display: -webkit-box;
						z-index: 2;
						.spfa{
							width: 112rpx;
							height: 32rpx;
							vertical-align: middle;
							margin-top: -7rpx;
							margin-right: 20rpx;
							line-height: 42rpx;
						}
					}
					.card-free{
						position: absolute;
						right: 0;
						height: 82rpx;
						image{
							width: 82rpx;
							height: 82rpx;
						}
						z-index: 1;
					}
				}
				.item-body-events {
					align-items: flex-start;
					justify-content: space-between;
					background: #F4F8FF;
					border-radius: 10rpx;
					padding: 0 20rpx;
					margin-bottom: 20rpx;
					.events-left{
						.event-detail{
							padding: 20rpx 0;
							align-items: flex-start;
							font-size: 22rpx;
							font-family: Arial;
							color: #999999;
							.event-btn{
								background: #D9E5FF;
								border-radius: 6rpx;
								line-height: 20rpx;
								font-size: 20rpx;
								color: #4C88FF;
								padding: 10rpx;
								white-space: nowrap;
							}
							.event-info{
								margin-left: 15rpx;
								line-height: 40rpx;
							}
							.event-date{
								margin: 0 15rpx;
								line-height: 22rpx;
							}
							.event-name{
								line-height: 28rpx;
								width: 50rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.event-team{
								margin: 0 0 0 15rpx;
								line-height: 28rpx;
								width: 220rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						.event-detail.border{
							border-top: 1rpx #E6E9ED solid;
		
						}
					}
					.events-right{
						text-align: right;
						height: 36rpx;
						width: 36rpx;
					}
				}
				/deep/ .article-match{
					max-width: 492rpx;
				}
			}
			.item-foot{
				margin: 20rpx 20rpx 30rpx;
				justify-content: space-between;
				.item-foot-info{
					font-size: 20rpx;
					line-height: 24rpx;
					.date{
						color: #999999;
						font-family: Arial;
					}
				}
				.item-foot-type{
					display: flex;
					align-items: center;
					.type-info{
						font-size: 22rpx;
						color: #999999;
						line-height: 22rpx;
						margin-right: 10rpx;
					}
					.type-price{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: $uni-primary;
						line-height: 24rpx;
						image{
							width: 24rpx;
							height: 25rpx;
							margin-left: 10rpx;
						}
					}
				}
				.color-blue{
					font-size: 20rpx;
					line-height: 24rpx;
				}
			}
			.item-icon{
				position: absolute;
				top: 0;
				right: 0;
				image{
					width: 97rpx;
					height: 97rpx;
				}
			}
		}
		.add-icon{
			background-image: url('~@/public/images/public/bdbq.png');
			background-position: top right;
			background-repeat: no-repeat;
			background-size: 64rpx 64rpx;
		}
	}
	.match-detail{
		width: 532rpx;
		.match-detail-item{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 0 20rpx;
			.body{
				margin-top: 30rpx;
				box-shadow: 0 1rpx 0 0 #EDEDED;
				.center{
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.des{
					color: #999999;
					font-size: 20rpx;
					line-height: 20rpx;
					margin-bottom: 20rpx;
					.left, .right{
						//width: 130rpx;
						font-size: 20rpx;
					}
					.right{
						text-align: right;
					}
					.ml10{
						margin-left: 10rpx;
					}
				}
				.content{
					margin-bottom: 30rpx;
					.center{
						color: #333333;
						font-size: 26rpx;
						line-height: 36rpx;
						font-weight: bold;
						.color-red{
							text-align: center;
							width: 50rpx;
							font-size: 30rpx;
							font-family: Arial;
							font-weight: bold;
							color: #E51A1A;
							margin: 0 20rpx;
						}
						.home, .away{
							flex: 2;
						}
						.home{
							text-align: right;
						}
					}
				}
			}
			.foot{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				text{
					font-size: 24rpx;
					line-height: 24rpx;
				}
			}
		}
	}
	.addcontent-detail{
		width: 532rpx;
		.addcontent-detail-item{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			.item-body{
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				image{
					display: inline-block;
					width: 66rpx;
					height: 36rpx;
					vertical-align: sub;
					margin-right: 10rpx;
				}
			}
			.item-foot{
				margin-top: 25rpx;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				line-height: 24rpx;
				.date{
					font-family: Arial;
					color: #999999;
				}
			}
		}
	}
</style>